<template>
  <div>
    <div class="sys-dictindex-box">
      <el-container>
        <el-main>
          <div>
            <el-form :inline="true" size="small" :model="searchForm" class="demo-form-inline" @keyup.enter.native="search" @submit.native.prevent>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="addDic" v-if="permissions.indexOf('dict_sysDict_add') > -1">添加</el-button>
                </el-form-item>
                <el-form-item >
                <el-input placeholder="请输入类型" v-model="searchForm.type"/>
              </el-form-item>
              <el-form-item >
                <el-select v-model="searchForm.dictType" clearable placeholder="请选择字典类型">
                  <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.name"
                    :value="item.dictType">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-delete" @click="clear()">清空</el-button>
              </el-form-item>
              <el-tooltip effect="dark" content="刷新" placement="top-start">
                <el-button style="float: right;" size="small" circle icon="el-icon-refresh" @click="search()"></el-button>
              </el-tooltip>
            </el-form>
          </div>
          <el-table
            border
            stripe
            size="mini"
            :data="dictList"
            ref="sysDictTable"
            style="width: 100%">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.pageSize + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="type" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="描述" prop="description" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="字典类型" prop="dictType" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="备注信息" prop="remarks" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" fixed="right" width="200px" align="center">
              <template slot-scope="scope" >
                <el-button type="text" size="small" icon="el-icon-edit" @click="editDic(scope.row)" v-if="permissions.indexOf('dict_sysDict_edit') > -1">编辑</el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="del(scope.row)" v-if="permissions.indexOf('dict_sysDict_del') > -1">删除</el-button>
                <el-button type="text" size="small" icon="el-icon-view" @click="dictItem(scope.row)" >字典项</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :style="{float: 'right', padding: '20px'}"
            class="pageBar"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.current"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
          </el-pagination>
        </el-main>
      </el-container>
      <el-dialog
        customClass="dialog-form-full"
        :title="title" width="600px"
        :visible.sync="showDialog"
        @close="close"
        append-to-body="true">
        <el-container>
          <el-main>
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              :rules="rules">
              <el-form-item label="类型" prop="type">
                <el-input placeholder="请输入字段类型" v-model="form.type"/>
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input placeholder="请输入字段描述" v-model="form.description"/>
              </el-form-item>
              <el-form-item label="字典类型"  prop="dictType">
                <el-select v-model="form.dictType" placeholder="请选择类型">
                  <el-option
                    v-for="item in options"
                    :key="item.dictType"
                    :label="item.name"
                    :value="item.dictType">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注信息" ref="remarks" prop="remarks">
                <el-input placeholder="请输入备注信息" v-model="form.remarks"/>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button icon="el-icon-circle-plus-outline" size="small" @click="saveForm" type="primary">确 定</el-button>
          <el-button icon="el-icon-circle-close" size="small" @click="close">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <sys-dic-item ref="sysDic"/>
  </div>
</template>
<script>
import sysDictApi from "./api/sysDict.service";
import SysDicItem from "./sysDicItem";

export default {
  data() {
    return {
      rules: {
        type: [
          {
            required: true,
            message: "名称不能为空！"
          },
          {
            pattern: /^[a-zA-Z_]{1,}$/,
            message: "只允许字母以及下划线",
            trigger: "blur"
          }
        ],
        description: [
          {
            required: true,
            message: "描述不能为空！"
          }
        ],
        dictType: [
          {
            required: true,
            message: "字典类型不能为空！"
          }
        ],
        endDate: [
          {
            required: true,
            message: "结束时间不能为空！"
          }
        ],
        remarks: [
          {
            required: true,
            message: "备注信息不能为空！"
          }
        ]
      },
      permissions: JSON.parse(sessionStorage.getItem('permissions')),
      title: "",
      dictList: [],
      searchForm: {
        // type: '',
        dictType: ""
      },
      form: {
        type: "",
        description: "",
        dictType: "",
        remarks: ""
      },
      options: [
        {
          type: 0,
          dictType: "系统类"
        },
        {
          type: 1,
          dictType: "业务类"
        },
        {
          type: 2,
          dictType: "日志类"
        }
      ],
      showDialog: false,
      winState: "",
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  components: {
    SysDicItem
  },
  created() {
    this.init(this.pageInfo);
  },
  methods: {
    // 添加
    addDic() {
      this.showDialog = true;
      this.title = "添加";
    },
    // 编辑
    editDic(row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.title = "编辑";
      this.showDialog = true;
      this.form = obj;
    },
    // 保存
    saveForm() {
      let _this = this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.title === "添加") {
            sysDictApi.saveSysDict(this.form).then(res => {
              if (res.code == 10200) {
                this.$message.success("添加成功！");
                _this.close();
                _this.search();
              } else {
                _this.$message.error(res.msg);
              }
            });
          } else {
            sysDictApi.updateSysDictById(this.form).then(res => {
              if (res.code == 10200) {
                this.$message.success("修改成功！");
                _this.close();
                _this.search();
              } else {
                _this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    // 关闭
    close() {
      let obj = {
        type: "",
        description: "",
        dictType: "",
        remarks: ""
      };
      this.form = obj;
      this.$refs["form"].resetFields();
      this.showDialog = false;
    },
    // 删除
    del(row) {
      this.$confirm("本操作将永久删除字典，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        sysDictApi.deleteSysDict([row.id],[row.type]).then(res => {
          if (res.data > 0) {
            this.$message.success("删除字典成功！");
            this.search();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    // 查询
    search() {
      this.pageInfo.current = 1;
      this.init(this.pageInfo);
    },
    // 清空
    clear() {
      this.searchForm.type = '';
      this.searchForm.dictType = '';
      this.search()
    },
    // 字典项
    dictItem(row) {
      this.$refs.sysDic.show(row.id);
    },
    // 初始化数据
    init(page) {
      let _this = this;
      let params = Object.assign({
        current: page.current,
        size: page.pageSize
      });
      sysDictApi.getSysDictPage(Object.assign(params,this.searchForm)).then(res => {
        _this.pageInfo.current = res.data.current;
        _this.pageInfo.pageSize = res.data.size;
        _this.pageInfo.total = res.data.total;
        _this.dictList = res.data.records;
      });
    },
    // 改变页码
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.init(this.pageInfo);
    },
    handleCurrentChange(val) {
      this.pageInfo.current = val;
      this.init(this.pageInfo);
    }
  }
};
</script>

